<template>
	<!-- 详情 -->
	<view class="content">
		<view>
			<view class="item">
				<view class="left">任务标题</view>
				<view class="right">{{ taskInfo.title }}</view>
			</view>
			<view class="item">
				<view class="left">网格</view>
				<view class="right">{{ taskInfo.gridName }}</view>
			</view>
			<view class="item">
				<view class="left">目标任务数</view>
				<view class="right">{{ taskInfo.targetNum }}</view>
			</view>
			<view class="item">
				<view class="left">已完成</view>
				<view class="right">{{ taskInfo.completeness }}%</view>
			</view>
			<view class="item">
				<view class="left">目标任务类型</view>
				<view class="right">{{ targetType }}</view>
			</view>
			<view class="item">
				<view class="left">任务状态</view>
				<view class="right">{{ taskStatus }}</view>
			</view>
			<view class="item">
				<view class="left">任务内容</view>
				<view class="right">{{ taskInfo.content }}</view>
			</view>
		</view>
		<view class="targetLis" v-if="targetList.length!=0">
			<view class="head">目标任务(选择完成的任务)</view>
			<view class="item" v-for="(item,index) in targetList" :key="index" @click="handleConfirm(item.id,item.name)">
				<view class="left"><image :src="item.img"></image></view>
				<view class="right">
					<view class="name">{{ item.name }}</view>
					<view class="address">负责人电话：{{ item.resPhone }}</view>
					<view class="ad2">地址：{{ item.address }}</view>
				</view>
			</view>
		</view>
		
		<view class="btn" @click="handleGoTaskConfirm" v-if="taskInfo.taskStatus != 3 && targetList.length == 0">
			完成任务
		</view>
		<view class="btn2" v-if="taskInfo.taskStatus == 3">
			已结束
		</view>
		
	</view>
</template>

<script>
	export default{
		data() {
			return {
				id:'',
				taskInfo:{},
				targetTypeList:[],
				targetType:'',
				taskStatusList:[],
				taskStatus:'',
				targetList:[],
				type:0,
			}
		},
		onLoad(options) {
			this.id = options.id
		},
		mounted() {
			setTimeout(() => {
				this.myTaskDetail()
			},500)
			this.getDictionaries()
			this.getDictionaries2()
		},
		methods:{
			// 任务目标类型
			getDictionaries() {
				let params = {
					dictCode:'target_type_dict'
				}
				this.$u.api.dictionaries(params)
					.then(res => {
						// console.log(res)
						if(res.code == 200) {
							res.result.forEach(item => {
								this.targetTypeList.push({
									label:item.text,
									value:item.value
								})
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 任务状态
			getDictionaries2() {
				let params = {
					dictCode:'task_status_dict'
				}
				this.$u.api.dictionaries(params)
					.then(res => {
						// console.log(res)
						if(res.code == 200) {
							res.result.forEach(item => {
								this.taskStatusList.push({
									label:item.text,
									value:item.value
								})
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			
			myTaskDetail() {
				let params = {
					eventId:this.id
				}
				console.log(params)
				this.$u.api.myTaskDetail(params)
					.then(res => {
						console.log(res)
						if(res.code == 200) {
							this.targetTypeList.forEach(item => {
								if(item.value == res.result.distribute.targetType) {
									this.targetType = item.label
									this.type = res.result.distribute.targetType
								}
							})
							this.taskStatusList.forEach(item => {
								if(item.value == res.result.distribute.taskStatus) {
									this.taskStatus = item.label
								}
							})
							this.targetList = res.result.targetList
							this.taskInfo = res.result.distribute
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			handleGoTaskConfirm() {
				uni.navigateTo({
					url:'../TaskConfirm/TaskConfirm?id='+this.id +'&type=' + this.type
				})
			},
			handleConfirm(id,name) {
				uni.navigateTo({
					url:'../TaskConfirm/TaskConfirm?targetId='+ id +'&name=' + name +'&id=' + this.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 20rpx;
		min-height: 100vh;
		background-color: #f5f6f7;
		.targetLis{
			padding-bottom: 120rpx;
			.head{
				padding: 20rpx;
				color: #000;
				font-size: 28rpx;
			}
			.item{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 20rpx;
				background-color: #fff;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				.left{
					width: 160rpx;
					height: 160rpx;
					image{
						border-radius: 20rpx;
					}
					margin-right: 30rpx;
				}
				.right{
					display: flex;
					justify-content: space-around;
					align-items: flex-start;
					flex-direction: column;
					color: #000;
					font-size: 25rpx;
					.name{
						color: #000;
						font-size: 28rpx;
					}
					.address{
						margin: 20rpx 0;
					}
					.ad2{}
				}
				
			}
		}
		.item{
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 27rpx;
			border-bottom: 1px solid #f4f1f1;
			background-color: #fff;
			.left{
				color: #999;
			}
			.right{
				color: #000;
			}
		}
		.btn{
			width: 600rpx;
			height: 90rpx;
			background-color: #007AFF;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 28rpx;
			position: fixed;
			bottom: 0;
			left: 50%;
			border-top: 1px solid #CCE6FF;
			border-radius: 45px;
			transform: translateX(-300rpx);
		}
		.btn2{
			width: 600rpx;
			height: 90rpx;
			background-color: #cecece;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 28rpx;
			position: fixed;
			bottom: 0;
			left: 50%;
			border-top: 1px solid #CCE6FF;
			border-radius: 45px;
			transform: translateX(-300rpx);
		}
	}
</style>
